<template>
  <div class="first page">
    <!-- 首页上部分，轮播图 -->
    <mt-swipe :auto="3000" class="swipercontain">
      <mt-swipe-item v-for='val in swipers' :key="val.id">
        <a :href="val.url"><img :src="val.p" alt="图片加载异常"></a>
      </mt-swipe-item>
    </mt-swipe>
    <!-- 首页下部分，六宫格 -->
    <ul class="grid-box">
      <li>
        <router-link to="/home/newlist">
          <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png" alt="">
          <span>新闻资讯</span>
        </router-link>
      </li>
      <li>
        <router-link to="/home/xptj">
          <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="">
          <span>商品购买</span>
        </router-link>
      </li>
      <li>
        <router-link to="/home/8">
          <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/150351/19/14167/6853/5fed882dE195ef673/b2aa7d67e675baf8.png" alt="">
          <span>资源分享</span>
        </router-link>
      </li>
      <li>
        <router-link to="/home/xptj">
         <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png" alt="">
          <span>新品推荐</span>
        </router-link>
      </li>
      <li>
          <router-link to="/home/xptj">
          <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png" alt="">
          <span>会员中心</span>
          </router-link>
      </li>
      <li>
       <router-link to="/home/yjfk">
        <img src="https://m.360buyimg.com/babel/jfs/t1/39983/24/6834/1596/5cd4f247E8cf89f1e/b8a8418d5418f471.png" alt="">
        <span>意见反馈</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'home',
  created () {
    this.getSwiper()
  },
  data () {
    return {
      swipers: []
    }
  },
  methods: {
    getSwiper () {
      // axios在获取本地文件（如json）时，需要将文件放在public文件下
      this.axios.get('swipe.json').then(
        r => {
          this.swipers = r.data
          console.log(this.swipers)
        }, e => {
          console.log('请求失败' + e)
        }
      )
    }
  }
}
</script>

<style scoped>
.first{
  width: 98vw;
}
.mint-swipe{
  height: 225px;
  background-color: #fff;
}
.mint-swipe img{
  margin-top: 1px;
  width: 97%;
  border-radius: 5px;
}
.grid-box{
  border-top: 2px solid #999;
  height: 240px;
  padding-top: 30px;
  margin-bottom: 10px;
  background-color: #fff;
}
.grid-box>li{
  display: inline-block;
  width: 30%;
  height: 45%;
  overflow: hidden;
  margin: 5px 1%;
}

.grid-box a{
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;
  font-size: 13px;
  color: #224;
}
.grid-box a img{
  display: block;
  margin: auto;
  height: 50%;
  border-radius: 50%;
}
</style>
